import React, { useState } from 'react'
import "./index.css"
export default function Item({ todo, done, id, todoList, setTodoList }) {
  const [isActive,setIsActive]= useState(false)
  //鼠标点击切换实际
  const checkChangeHandle = (e) => { 
    const newTodo = todoList.map(item => { 
      if (item.id === id){
        item.done = e.target.checked
      }
      return item
    })
    setTodoList(newTodo)
  } 

  //鼠标移入事件
  const mouseHandle = (bool) => {
    return ()=>{
      setIsActive(bool)
    }
  }
  //删除事件
  const deleteHandle = () => {
      const  newTodoList  = todoList.filter(item=>{
        return item.id !==id
      })
        setTodoList(newTodoList)
  }
  return (
    <li onMouseEnter={mouseHandle(true)} onMouseLeave={mouseHandle(false)} className={isActive?'active':''}>
      <label>
        <input type="checkbox" checked={done}  onChange={checkChangeHandle}/>
        <span>{todo}</span>
      </label>
      <button onClick={deleteHandle} className="btn btn-danger" style={{ display: isActive?'block':'none' }}>删除</button>
    </li>
  )
}
